import React from 'react'
import './index.scss'
import { Col, Row } from 'antd';
// Row 行，Col 列
const Index = () => {

  return (
    <div>
      <h1>首页 - 栅格布局</h1>

      <Row className='row'>
        <Col className='col' span={12}></Col>
      </Row>

      <Row gutter={16} className='row box-home'>
        <Col className='col' span={8}>
          第一块
        </Col>
        <Col className='col' span={8}>
          第二块
        </Col>
        <Col className='col' span={8}>
          第三块
        </Col>
      </Row>

      <Row className='row' gutter={6}>
      <Col className="col" span={6}>
        <div style={{backgroundColor: 'red'}}>col-6</div>
      </Col>
      <Col className="col" span={6}>
        <div style={{backgroundColor: 'red'}}>col-6</div>
      </Col>
      <Col className="col" span={6}>
        <div>col-6</div>
      </Col>
      <Col className="col" span={6}>
        <div>col-6</div>
      </Col>
    </Row>


    <Row className='row'>
      <Col className='col' offset={2} span={12}></Col>
    </Row>

    <Row className='row'>
      <Col className='col' span={18} push={6}>
        col-18 col-push-6
      </Col>
      <Col className='col' span={5} pull={18}>
        col-6 col-pull-18
      </Col>
    </Row>

    </div>
  )
}

export default Index